<template>
  <div class="search">
    <div class="top" v-if="flag">
      <input type="text" value="请输入内容" @keyup.enter="searchClick">
      <button @click="searchClick">搜索</button>
    </div>
    <div class="bottom" v-else>
      <router-link :to="`/play/${item.id}/${item.name}/${item.artists[0].name}/${setUrl(item.album.artist.img1v1Url)}`" tag="div" class="list" v-for="item in searchArr" :key="item.id">
        <p class="work" :title="item.name">{{ cutString(item.name )}}</p>
        <div class="name">
          <span :title="allName(item.artists)">{{cutName(item.artists)}}</span>
        </div>
        <p class="source" :title="item.album.name">《{{ cutString(item.album.name )}}》</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchArr: [],
      flag: true
    }
  },
  methods: {
    searchClick () {
      this.axios({
        params: {
        // limit:9,
          keywords: document.getElementsByTagName('input')[0].value
        },
        url: 'search'
      }).then(res => {
        this.searchArr = res.data.result.songs
        this.flag = false
      // console.log(this.searchArr)
      })
    },
    cutString (str) {
      if (str.length > 14) {
        return str.substring(0, 14) + '...'
      }
      return str
    },
    cutName (arr) {
      let str = ''
      for (let i = 0; i < arr.length; i++) {
        str = str + arr[i].name + ' '
      }
      return this.cutString(str)
    },
    allName (arr) {
      let str = ''
      for (let i = 0; i < arr.length; i++) {
        str = str + arr[i].name + ' '
      }
      return str
    },
    setUrl (url) {
      if (url) {
        return encodeURIComponent(url)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search{
  .top{
    background-color: #fff;
    margin: 0px 20px;
    padding: 45px 0px;
    input{
      height: 50px;
      width: 300px;
      border-radius: 5px;
      margin-left: 300px;
    }
    button{
      background-color: #fff;
      border-radius: 5px;
      width: 100px;
      height: 50px;
      margin-left: 100px;
    }
  }
  .bottom{
    background-color: #fff;
    margin: 0px 20px;
    padding: 45px 0px;
   .list{
     display: flex;
     cursor: pointer;
     justify-content: space-around;
     margin-top: 10px;
     .work{
       width: 300px;
     }
     .name{
       width: 300px;
       span{
         margin-left: 5px;
       }
     }
     .source{
       width: 300px;
     }
   }
  }
}
</style>
